<template>
	<div class="common-layout">
		<el-container>
			<el-aside width="160px" class="bg-[#141414] text-white h-screen">
				<div class="flex flex-col items-center tag-list">
					<div class="py-2 w-full text-center">影评标签</div>

					<router-link
						:to="`/hot?tag=hot`"
						:class="['py-2', 'w-full', 'text-center', 'cursor-pointer', 'hover:bg-gray-500', { '!bg-gray-500': activeTag === 'hot' }]"
					>
						排行榜
					</router-link>

					<router-link
						:to="`/tags?tag=${item.id}`"
						v-for="(item, index) in tagList"
						:key="index"
						:class="['py-2', 'w-full', 'text-center', 'cursor-pointer', 'hover:bg-gray-500', { '!bg-gray-500': activeTag == item.id }]"
					>
						{{ item.tagName }}
					</router-link>
				</div>
			</el-aside>
			<el-container>
				<el-header class="text-white">
					<div class="flex justify-between pt-2">
						<div></div>
						<div class="relative">
							<input v-model="searchValue" placeholder="请输入搜索关键词" type="text" class="search-input" />
							<el-icon @click.stop="search" class="absolute right-8 top-1 cursor-pointer" size="20">
								<Search />
							</el-icon>
						</div>
						<div class="flex items-center">
							<div class="px-1 w-[75px] cursor-pointer" @click.stop="shoNotice">
								<icon-community class="mx-auto" />
								<div class="text-center">公告</div>
							</div>
							<router-link class="px-1 w-[75px] cursor-pointer" to="/me">
								<icon-community class="mx-auto" />
								<div class="text-center">个人中心</div>
							</router-link>
							<router-link class="px-1 w-[75px] cursor-pointer" to="/message">
								<icon-community class="mx-auto" />
								<div class="text-center">我的消息</div>
							</router-link>
							<div class="px-2">
								<el-dropdown>
									<el-avatar :size="50" :src="userInfo.avatar" />
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item @click.stop="updatePasswordDialog = true">修改密码</el-dropdown-item>
											<el-dropdown-item @click.stop="toLogout">退出登录</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</div>
						</div>
					</div>
				</el-header>
				<el-main class="text-white">
					<router-view />
				</el-main>
			</el-container>
		</el-container>

		<el-dialog
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			v-model="updatePasswordDialog"
			title="修改密码"
			width="40%"
			:before-close="resetForm"
		>
			<el-form :model="userPassword" label-width="120px">
				<el-form-item label="旧密码">
					<el-input type="password" v-model="userPassword.oldPassword" />
				</el-form-item>
				<el-form-item label="新密码">
					<el-input type="password" v-model="userPassword.newPassword" />
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="editPassword">更新</el-button>
					<el-button @click="resetForm">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog v-model="noticeDig" title="公告信息" width="40%">
			<div class="demo-collapse">
				<el-collapse v-model="activeNames">
					<el-collapse-item v-for="(item, index) in noticeList" :key="index" :title="`${item.title}`" :name="item.id">
						<p>
							{{ item.content }}
						</p>
					</el-collapse-item>
				</el-collapse>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { getTagList } from "@/api/tag";
import { useRoute, useRouter } from "vue-router";
import { useUserStore } from "@/stores/userStores";
import IconCommunity from "@/components/icons/IconCommunity.vue";
import { updatePassword } from "@/api/user";
import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { getAnnouncePage } from "@/api/announce";
const tagList = ref([]);

const route = useRoute();
const router = useRouter();

const userStore = useUserStore();
const userInfo = computed(() => {
	return userStore.useInfo;
});
const searchValue = ref("");

const updatePasswordDialog = ref(false);

const userPassword = reactive({
	id: userStore.getUserInfo().id,
	oldPassword: "",
	newPassword: "",
});

const resetForm = () => {
	userPassword.oldPassword = "";
	userPassword.newPassword = "";
	updatePasswordDialog.value = false;
};
const editPassword = async () => {
	if (userPassword.oldPassword === "") {
		ElMessage.error("请输入旧密码");
		return;
	}
	if (userPassword.newPassword === "") {
		ElMessage.error("请输入新密码");
		return;
	}
	const result = await updatePassword(userPassword);
	if (result.success) {
		ElMessage.success("修改成功");
		updatePasswordDialog.value = false;
		resetForm();
	}
};

const activeTag = computed(() => {
	return route.query.tag;
});

const search = () => {
	if (searchValue.value === "") {
		return;
	}
	router.push({
		path: "/search",
		query: {
			search: searchValue.value,
		},
	});
};

const noticeDig = ref(false);

const activeNames = ref([]);
const noticeList = ref([]);
const shoNotice = () => {
	noticeDig.value = true;
	getAnnouncePage({ page: 1, size: 30 }).then((res) => {
		noticeList.value = res.data.list;
	});
};

const toLogout = () => {
	userStore.clear();
	router.push("/login");
};

onMounted(() => {
	getTagList().then((res) => {
		tagList.value = res.data;
	});
});
</script>

<style>
/* 隐藏 Chrome、Safari 和 Opera 的滚动条 */
aside::-webkit-scrollbar {
	display: none;
}

aside {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

body {
	background-color: #141414;
}

.search-input {
	width: 400px;
	height: 40px;
	border-radius: 15px;
	background-color: #333333;
	border: none;
	outline: none;
	padding: 0 10px;
	padding-right: 39px;
}
</style>
